<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Template • TodoMVC</title>
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
		<!-- CSS overrides - remove if you don't need it -->
		<link rel="stylesheet" href="css/app.css">
		<style>

		</style>
	</head>
	<body>
		<div class="container">
			<section class="todoapp" >

				<header class="header">
					<h1>todos</h1>

						<input class="new-todo" placeholder="What needs to be done?" autofocus v-on:keydown.13="add" v-model="newTodo">
				</header>
				<!-- This section should be hidden by default and shown when there are todos -->
				<section class="main">
					<input class="toggle-all" type="checkbox">
					<label for="toggle-all">Mark all as complete</label>
					<ul class="todo-list">
						<!-- These are here just to show the structure of the list items -->
						<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
						<li v-for="(item,index) in todos" v-bind:class="{completed:item.completed,editing:editingId==index}" v-on:dblclick="edit(index)">
							<div class="view">
								<input class="toggle" type="checkbox" v-model="item.completed">
								<label >{{item.content}}</label>
								<button class="destroy" v-on:click="remove(index)"></button>
							</div>
								<input class="edit" v-model="item.content" v-on:keyup.13="save">
						</li>
						<!-- <li>
							<div class="view">
								<input class="toggle" type="checkbox">
								<label>Buy a unicorn</label>
								<button class="destroy"></button>
							</div>
							<input class="edit" value="Rule the web">
						</li> -->
					</ul>
				</section>
				<!-- This footer should hidden by default and shown when there are todos -->
				<footer class="footer">
					<!-- This should be `0 items left` by default -->
					<span class="todo-count"><strong>{{getCount}}</strong> item left</span>
					<!-- Remove this if you don't implement routing -->
					<ul class="filters">
						<li>
							<a  href="#/">All</a>
						</li>
						<li>
							<a  href="#/active">Active</a>
						</li>
						<li>
							<a  href="#/completed">Completed</a>
						</li>
					</ul>
					<!-- Hidden if no completed items are left ↓ -->
					<button class="clear-completed" v-on:click="removeAll">Clear completed</button>
				</footer>
			</section>
			<footer class="info">
				<p>Double-click to edit a todo</p>
				<!-- Remove the below line ↓ -->
				<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
				<!-- Change this out with your name and url ↓ -->
				<p>Created by <a href="http://todomvc.com">you</a></p>
				<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
			</footer>
			<!-- Scripts here. Don't remove ↓ -->
			<!-- <script src="./libs/angular.js"></script> -->
		</div>
		<script src="libs/vue221.js"></script>
		<script src="js/vue-app.js"></script>
	</body>
</html>
